<template>
  <div class="GateControl">
    <TitleColumn name="开闸设置">
      <a-select
        class="selectGate"
        v-model:value="state.selectValue"
        style="width: 140px"
        @change="changeStcd"
      >
        <a-select-option
          :value="item.stcd"
          v-for="(item, index) in state.HZList"
          :key="'hz' + index"
          >{{ item.stnm }}</a-select-option
        >
      </a-select>
    </TitleColumn>
    <div class="content">
      <ul class="videoList">
        <!-- <li
          v-for="(item, index) in state.videoList"
          :key="'video' + index"
          @click="changeVideoPlay(index)"
        >
          <a-tag :color="state.activeVideoIndex == index ? 'green' : 'blue'"
            >视频{{ index + 1 }}</a-tag
          >
        </li> -->
      </ul>
      <div class="left">
        <div class="operationBtn">
          <a-select
            class="selectGate"
            v-model:value="state.activeVideoIndex"
            style="width: 120px; margin-right: 16px; height: 30px"
            @click="changeVideoPlay(index)"
          >
            <a-select-option
              :value="index"
              v-for="(item, index) in state.videoList"
              :key="'hz' + index"
              >视频{{ index + 1 }}</a-select-option
            >
          </a-select>
          <div
            class="btn1"
            :class="{ noClick: state.selectValue != 'XYHHZ0001204' }"
            @click="openControl"
          >
            设备远控
          </div>
          <!-- <div class="btn2"></div> -->
        </div>

        <!-- <div class="parameters">
          <section>
            <p>预设开度：</p>
            <a-input-number
              class="inputNumber"
              v-model:value="state.opening"
              :min="1"
              :max="200"
            />
          </section>
          <section>
            <p>控制密度：</p>
            <a-input-number
              class="inputNumber"
              v-model:value="state.density"
              :min="1"
              :max="200"
            />
          </section>
        </div> -->
        <div class="liveVideo">
          <div class="videoRef" v-if="getFlvUrl" @click="openMaxVideo">
            <Video :videoUrl="getFlvUrl" />
          </div>
          <div class="bg" v-else></div>
        </div>
      </div>
      <div class="right">
        <!-- <div class="operationBtn">
          <div class="btn1"></div>
          <div class="btn2"></div>
        </div> -->

        <div class="gateStatusTable">
          <MonitorTable />
        </div>
      </div>
    </div>

    <ControlPopup @register="registerModal" />
    <VideoPopup @register="videoModal" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, computed } from "vue";
import TitleColumn from "@/components/TitleColumn";
import MonitorTable from "./MonitorTable/index.vue";
import { useModal } from "@gui-pkg/antdcomponents";
import Video from "./video/index.vue";
import { getAllMonitorData, getVideoPlayUrl } from "@/api/mapServices/mapData";
import ControlPopup from "@/components/ControlPopup/index.vue";
import VideoPopup from "@/components/VideoPopup/index.vue";

defineOptions({ name: "ForecastPlan" });

const [registerModal, { openModal }] = useModal();
const [videoModal, { openModal: openVideoModal }] = useModal();

const state = reactive({
  selectValue: "XYHHZ0001204",
  isActive: 1,
  opening: "",
  density: "",
  HZList: [],
  videoList: [],
  activeVideoIndex: 0,
});

const getFlvUrl = computed(() => {
  let flvUrl = "";
  if (state.videoList.length && state.videoList[state.activeVideoIndex].startUrl) {
    flvUrl = state.videoList[state.activeVideoIndex].startUrl.flv;
  }
  return flvUrl;
});

onMounted(() => {
  loadAllMonitorData();
});

const openMaxVideo = () => {
  let findSelect = state.HZList.find((item) => item.stcd == state.selectValue);
  if (findSelect) {
    openVideoModal(true, {
      stcd: state.selectValue,
      rowData: { ...findSelect },
      videoIndex: state.activeVideoIndex,
    });
  }
};

const openControl = () => {
  if (state.selectValue != "XYHHZ0001204") {
    return;
  }
  let findSelect = state.HZList.find((item) => item.stcd == state.selectValue);
  if (findSelect) {
    openModal(true, {
      stcd: state.selectValue,
      rowData: { ...findSelect },
    });
  }
};

const changeStcd = () => {
  findSelectVideoUrl();
};

const changeVideoPlay = (index) => {
  findSelectVideoUrl(index);
  // state.activeVideoIndex = index;
};

const loadAllMonitorData = async () => {
  let allMonitorData = await getAllMonitorData();
  console.log(allMonitorData, "allMonitorData");
  let HZList = allMonitorData.filter((item) => item.videoStcd);
  state.HZList = [...HZList];
  findSelectVideoUrl();
};

const findSelectVideoUrl = async (index) => {
  let videoStcd = "";
  let find = state.HZList.find((item) => item.stcd == state.selectValue);
  if (find) {
    videoStcd = find.videoStcd;
    if (videoStcd) {
      let data = await getVideoPlayUrl({ videoStcd });
      if (data && data.length) {
        state.videoList = [...data];
        state.activeVideoIndex = index || 0;
      }
    } else {
      state.videoList = [];
    }
  }
};

onUnmounted(() => {});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.GateControl {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-row-gap: 10px;
  box-sizing: border-box;
  background: #02123433;
  backdrop-filter: blur(10px);
  ::v-deep(.selectGate) {
    .ant-select-selector {
      background: transparent;
      color: #b4dfff;
      border: 1px solid rgba(6, 183, 253, 0.4);
      font-size: 14px;
      background: #003e7e6b;
      border-radius: 6px;
    }
    .ant-select-arrow {
      color: #b4dfff;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 24px);
    overflow: hidden;
    position: relative;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    // .videoList {
    //   width: 8%;
    //   height: 100%;
    //   padding-top: 44px;
    //   li {
    //     color: #fff;
    //     margin-bottom: 6px;
    //     cursor: pointer;
    //   }
    // }
    .left {
      width: 50%;
      height: 100%;
      margin: 0 10px;

      .operationBtn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4px;
        margin-bottom: 10px;
        .btn1 {
          width: 160px;
          height: 30px;
          background: url(./images/btn1.png) no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          &.noClick {
            cursor: not-allowed;
          }
          &:hover {
            opacity: 0.8;
          }
        }
        .btn2 {
          width: 160px;
          height: 46px;
          background: url(./images/btn2.png) no-repeat;
          background-size: contain;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
      }

      .parameters {
        display: flex;
        padding-top: 10px;
        margin-bottom: 10px;
        section {
          display: flex;
          align-items: center;
          p {
            font-size: 12px;
            color: #b4dfff;
            padding-left: 10px;
          }
          .inputNumber {
            width: 60px !important;
            height: 24px;
            background: #003e7e6b;
            border: 1px solid;
            border-image: linear-gradient(
              181deg,
              rgba(6, 183, 253, 0.4) 3.03%,
              #51fbff 47.23%,
              rgba(6, 183, 253, 0.4) 91.41%
            );
            border-image-slice: 1;
            color: #fff;
            font-size: 14px;
            border-radius: 6px;
          }
        }
      }
      .liveVideo {
        height: 210px;
        width: 100%;
        text-align: center;
        cursor: pointer;
        .videoRef {
          height: 100%;
          width: 100%;
        }
        .bg {
          height: 100%;
          background: url(./images/liveVideo.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .right {
      width: 50%;
      height: 100%;
      .gateStatusTable {
        width: 100%;
        // height: calc(100% - 64px);
        height: 100%;
        padding-top: 4px;
      }
    }
    // background: url(./images/bg.png) no-repeat;
    // background-size: 100% 100%;
  }
}
</style>
